<template>
	<view style="padding-bottom: 240rpx;">
		<view class="t-c bf pb30">
			<view>
				<text style="font-size: 50rpx;">{{'￥'}}</text>
				<!-- 购物车有物品显示 购物车商品价格 -->
				<text v-if="orderList.length > 0" class="wei" style="font-size: 90rpx;">{{amount}}</text>
				<text v-else class="wei" style="font-size: 90rpx;">{{money}}</text>
			</view>
			<view v-if="tableId != 0 && Number(discount)" class="c9" style="text-decoration: line-through;" >￥{{originMoney}}</view>
			<view class="c9" v-if="tableId != 0">桌台号：{{tableName}}</view>
		</view>
		<!-- 波浪线 -->
		<view class="c9" style="padding: 20rpx;">订单号：{{outTradeNo}}</view>
		<block v-if="tableId == 0">
			<view class="bf p02 mb20">
				<u-form-item label="就餐类型:" label-width="180">
					<u-radio-group v-model="isOut" @change="radioGroupChange">
						<u-radio name="1" :active-color="tColor">店内就餐</u-radio>
						<u-radio name="2" :active-color="tColor">打包带走</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
		</block>
		<block v-else>
			<view class="bf p02">
				<u-form-item label="就餐人数:" label-width="180" >
					<view class="f-x-bt" @click="showModal" >{{people}}位<text  class="iconfont iconright ml10 f24"/></view>
				</u-form-item>
			</view>
		</block>
		<view class="bf p02 mb20">
			<u-form-item label="备注:" :border-bottom='false'  >
				<u-input v-model="value" type="text" placeholder="请输入特殊要求"/>
			</u-form-item>
		</view>
		<!-- 点单菜品 -->
		<block v-if="orderList.length>0">
			<view class="flex p2 bf p-r wei">
				<text style="flex-grow: 1;">{{alreadyGoods.length>0?'加菜':'商品清单'}}</text>
			</view>
			<view class="flex p2 bf p-r" v-for="item in orderList" :key="item.id" >
				<view class="top-line"></view>
				<text style="width: 400rpx;">{{item.name}}</text>
				<text style="width: 90rpx;">x{{item.num}}</text>
				<text class="c9" style="width: 180rpx;">￥{{item.originalMoney}}</text>
				<text class="iconfont iconsc ml10 f24" style="line-height: 40rpx;" @click="delGoods(item.id)"/>
			</view>
		</block>
		<!-- 已经下单菜品 -->
		<block v-if="alreadyGoods.length>0">
			<view class="mt20">
				<view class="flex p2 bf p-r wei">
					<text style="flex-grow: 1;">商品清单</text>
					<text class="t-r mr40" style="flex-grow: 1;color:#F56C6C;" @click="()=>{cancelFoodForm.id='',cancelSwitch = !cancelSwitch}">{{cancelSwitch?"取消":"退菜"}}</text>
				</view>
				<u-radio-group v-model="cancelFoodForm.id">
					<template v-for="element in alreadyGoods">
						<view class="flex p2 bf p-r w100" :key="element.id">
							<view class="top-line"></view>
							<u-radio v-if="cancelSwitch" icon-size="16" class="ma1" label-size="26" :disabled="element.addType === '3'" :name="element.id">
								<view class="flex p-r" style="width: 550rpx" :style="element.addType === '3'?'text-decoration: line-through;':''">
									<text style="width: 400rpx;">{{element.name}}</text>
									<text style="width: 90rpx;">x{{element.num}}</text>
									<text class="c9 t-r" style="flex-grow: 1;">￥{{element.money * element.num}}</text>
								</view>
							</u-radio>
							<view v-else class="w100">
								<view  class="flex p-r ml40 mr30 f26" style="width: 550rpx;" :style="element.addType === '3'?'text-decoration: line-through;':''">
									<text style="width: 400rpx;">{{element.name}}</text>
									<text style="width: 90rpx;">x{{element.num}}</text>
									<text class="c9 t-r" style="flex-grow: 1;">￥{{element.money * element.num}}</text>
								</view>
							</view>
							
							<view v-if="element.id === cancelFoodForm.id" style="color:#F56C6C;" @click="cancelFood">退菜</view>
							<view v-if="element.addType === '3'"  class="c9">[退]</view>
						</view>
					</template>
				</u-radio-group>
			</view>
			<!-- 餐桌费 start -->
			<view class="flex p2 bf p-r">
				<view class="top-line"></view>
				<text class="ml40" style="width: 400rpx;">餐桌费</text>
				<text style="width: 90rpx;">x{{people}}</text>
				<text class="c9 t-l" style="flex-grow: 1;">￥{{tablewareMoney}}</text>
				<!-- <text v-if="serviceType === '1'" class="c9 t-l" style="flex-grow: 1;">￥{{tablewareMoney}}</text> -->
				<!-- <text v-else-if="serviceType === '2'" class="c9 t-l" style="flex-grow: 1;">￥{{tablewareMoney}}</text> -->
			</view>
			<!-- 餐桌费 end -->
		</block>
		<view class="btn">
			<!-- 先结账后用餐模式 和 快速点单-->
			<block v-if="eatType==1 || tableId==0">
			<!-- 	<view class="expand-btns">
					<view class="expand-btn" style="background: #67C23A;" @click="discountShow=true">折扣/抹零</view>
					<view class="expand-btn" style="background: #409EFF;" @click="expandBtn('print')">打印预结单</view>
				</view> -->
				<view class="all-in f34" :style="{background:ztqs.cancel,width:'200rpx',color:'#FFFFFF'}" @click="cancelOrder">取消订单</view>
				<view class="all-in f34" :style="{background:ztqs.submit,width:'480rpx',color:'#000000'}" @click="quickPay">提交订单</view>
			</block>
			<!-- 先用餐后结账 且 从购物车调过来 -->
			<block v-else-if="eatType==2 && orderList.length > 0">
				<view class="all-in f34" :style="{background:ztqs.cancel,width:'200rpx',color:'#FFFFFF'}" @click="expandBtn('clear')">整单清空</view>
				<view class="all-in f34" :style="{background:ztqs.submit,width:'480rpx',color:'#000000'}" @click="postOrder">提交订单</view>
			</block>
			<!-- 先用餐后结账 且 不是未开台状态 -->
			<block v-else-if="eatType==2 && orderList.length <= 0 " >
				<view class="w100">
					<view class="expand-btns">
						<view class="expand-btn" style="background: #F56C6C;" @click="expandBtn('clear')">整单清空</view>
						<view class="expand-btn" style="background: #67C23A;" @click="discountShow=true">折扣/抹零</view>
						<view class="expand-btn" style="background: #E6A23C;" @click="getTurnInfo()">转台</view>
						<view class="expand-btn" style="background: #409EFF;" @click="expandBtn('print')">打印预结单</view>
					</view>
					<view class="f-x-ad">
						<view class="add-dish" @click="addGoods">加菜</view>
						<view class="check-out wei"
							:style="{background:ztqs.submit,width:'480rpx',color:'#000000'}"
							@click="goPay">结账并清台￥{{money}}</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 整单清空 折扣/抹零 转台 打印预结单 start -->
		<mg-modal :vs='true' :ismr="true" v-model="discountShow" width="650rpx" :z-index="3000">
			<view class="bs10 bf p-r p23">
				<view class="p20 ggh f-c f32">
					<view class="t-o-e t-c" style="width: 80%;">折扣/抹零</view>
				</view>
				<u-form-item label="原价:" label-width="180">
					<text>{{originMoney}}</text>
				</u-form-item>
				<u-form-item label="优惠类型:" label-width="180">
					<u-radio-group v-model="expandForm.type">
						<view class="f-x-bt">
							<u-radio name="changePrice" > 改价 </u-radio>
							<u-radio name="discount" > 折扣 </u-radio>
							<u-radio name="goZero" > 抹零 </u-radio>
						</view>
					</u-radio-group>
				</u-form-item>
				<block v-if="expandForm.type === 'changePrice'">
					<view class="ggb">
						<mg-input cname="p20" t='digit' v-model="expandForm.money" isr='1' ht='实付金额' htc='f30' :pr='`请输实付金额`' icn='f30' />
					</view>
				</block>
				<block v-else-if="expandForm.type === 'discount'">
					<view class="ggb">
						<mg-input max='4' cname="p20" t='digit' v-model="expandForm.fracture" isr='1' ht='优惠折扣' htc='f30' :pr='`请输优惠折扣`' icn='f30' />
					</view>
				</block>
				<block v-else-if="expandForm.type === 'goZero'">
					<u-radio-group v-model="expandForm.discountType">
						<view class="f-x-ad mt20">
							<u-radio name="1" > 抹分 </u-radio>
							<u-radio name="3" > 四舍五入到角 </u-radio>
						</view>
						<view class="f-x-ad mt20">
							<u-radio name="2" > 抹角 </u-radio>
							<u-radio name="4" > 四舍五入到元 </u-radio>
						</view>
					</u-radio-group>
				</block>
				
				<button class="foot-btn3 w33" :style="{background:tColor}" @click="expandBtn('discount')" :disabled="loading"
					:loading="loading" style="margin: 30rpx auto;" hover-class="btnhc">确认改价</button>
			</view>
		</mg-modal>
		<!-- 整单清空 折扣/抹零 转台 打印预结单 end -->
		<!-- 退菜 start-->
		<mg-modal :vs='true' :ismr="true" v-model="cancelFoodShow" width="650rpx" :z-index="3000">
			<view class="bs10 bf p-r p23">
				<view class="p20 ggh f-c f32">
					<view class="t-o-e t-c" style="width: 80%;">退菜</view>
				</view>
				<u-form-item label="退菜数量:" label-width="180">
					<input type="number" :value="cancelFoodForm.num" />
				</u-form-item>
				<u-form-item label="退菜理由:" label-width="180">
					<input type="text" :value="cancelFoodForm.reason" placeholder="请选择" />
				</u-form-item>
				<view class="flex f-w">
					<view v-for="(reason,index) in reasonList" :key="index">
						<view class="reason" :style="{background:reason.color}" @click="selectReason(reason.text,index)">{{reason.text}}</view>
					</view>
				</view>
				<button class="foot-btn3 w33" :style="{background:tColor}" @click="cancelGoods" :disabled="loading"
					:loading="loading" style="margin: 30rpx auto;" hover-class="btnhc">确认退菜</button>
			</view>
		</mg-modal>
		<!-- 退菜 end-->
		<!-- 转台 -->
		<u-select v-model="turnShow" mode="mutil-column" @change="getTableList" :list="turnTableList" @confirm="expandBtn('turnTable')"></u-select>
		<!-- 修改就餐人数 -->
		<u-select v-model="show" :list="seats" @confirm='revisionNum'></u-select>
	</view>
</template>

<script>
	import util from '@/common/utils.js'
	import mgModal from '@/components/common/modal.vue';
	import mgInput from '@/components/form/mg-input.vue'
		export default {
			components: {
				mgModal,
				mgInput
			},
			data() {
				return {
					cancelSwitch:false,
					cancelFoodShow:false,
					discountShow:false,
					loading:false,
					turnShow:false,
					isOut:'1', // 1店内就餐 2打包带走
					outTradeNo:'', //订单号
					tableName:'', 
					tableId:'',
					tableState:'',
					serviceType:'', //餐桌费收取 1按就餐人数 2按每桌收费
					people:1, //就餐人数
					tablewareMoney:'', //餐桌费
					originMoney:'', // 订单原价
					money:'', //实付金额
					discount:'', //优惠金额
					btnType:'', // 判断是从台桌跳转进来的还是点单页跳转进来的
					show:false,
					value: '',
					eatType:'', // 1餐前   2餐后
					orderList:[],
					alreadyGoods:[],
					expandForm:{
						money:undefined, //抹零优惠金额
						fracture:"", //打折字段
						discountType:'', //1抹分 2抹角 3四舍五入到角 4四舍五入到元
						toTableId:'',
						type:'changePrice' //抹零折扣类型 changePrice改价    discount折扣    goZero抹零
					},
					cancelFoodForm:{
						id:null,
						num:1,
						reason:''
					},
					turnTableList:[
						[],
						[],
						[]
					],
					reasonList:[
						{text:'客退酒水',color:'#ccc'},{text:'客人换菜',color:'#ccc'},{text:'估清问题',color:'#ccc'},{text:'重复出品',color:'#ccc'},{text:'做法错误',color:'#ccc'},
						{text:'等待太久',color:'#ccc'},{text:'输入错误',color:'#ccc'},{text:'质量问题',color:'#ccc'},{text:'客人要求',color:'#ccc'},
					]
				}
			},
			onLoad(option) {
				this.btnType = option.type || ''
				this.tableId = option.tableId || '0'
				this.getData()
			},
			computed:{
				ztqs() {
					return {
						submit:`linear-gradient(90deg, ${util.jjldColor(this.tColor,40)}, ${this.tColor})`,
						cancel:`#F56C6C`
					}
				},
				seats(){
					var list = []
					for(let num = 1;num<21;num++){
						list.push({
							value:num,
							label:num + '位'
						})
					}
					return list
				},
				amount(){
					var sum = 0
					//计算新单价格
					this.orderList.map(item=>{
						sum = sum+(item.money * item.num)
					})
					
					return sum.toFixed(2)
				}
			},
			watch:{
				expandForm:{
					deep:true,
					handler(){
						if(+this.expandForm.fracture>10){
							this.expandForm.fracture = '10.00'
						}
					}
				}
			},
			methods:{
				selectReason(reason,index){
					this.cancelFoodForm.reason = reason
					this.reasonList.forEach((item,idx)=>{
						if(idx === index){
							item.color = '#409EFF'
						}else{
							item.color = '#ccc'
						}
					})
				},
				cancelFood(){
					this.cancelFoodShow = true
				},
				async cancelGoods(){
					try{
						let {msg} = await this.util.request({
								'url': this.api.tableDelGoods,
								method:"post",
								data:this.cancelFoodForm
						})
						this.util.message(msg, 3, 2000)
						this.cancelFoodShow = false
						this.getData()
					}catch(e){
						this.util.message(e.msg, 3, 2000)
					}
					
				},
				async getTableList(e){
					await this.util.request({
							'url': this.api.tableChangeList,
							data:{
								areaId:this.turnTableList[0][e[0]].value,
								typeId:this.turnTableList[1][e[1]].value
							}
					}).then(res=>{
							var list = res.data.map(item=>{
								return {
									value: item.id,
									label: item.name
								}
							})
							this.$set(this.turnTableList,2,list)
							this.expandForm.toTableId = list[e[2]].value
							// this.turnTableList[2] = list
						})
					
				},
				// 获取转台区域 、桌台类型
				async getTurnInfo(){
				this.turnTableList = []
				let area = await this.util.request({
						'url': this.api.tableArea,
					}).then(res=>{
						return res.data.map(item=>{
							return {
								value: item.id,
								label: item.name
							}
						})
					})
				let type = await this.util.request({
						'url': this.api.tableType,
					}).then(res=>{
						return res.data.map(item=>{
							return {
								value: item.id,
								label: item.name
							}
						})
					})
					this.turnTableList[0] = area
					this.turnTableList[1] = type
					this.turnTableList[2] = []
					this.getTableList([0,0])
					// this.turnTableList.push(area,type,[])
					
					this.turnShow=true
				},
				async delGoods(id){
					await this.util.modal('您确认要删除此商品吗？','删除商品').then(async res=>{
						await this.util.request({
							'url': this.api.delLine,
							method:"post",
							data: {
								id:id
							}
						})
						this.getData()
					
					});
					
				},
				async cancelOrder(){
					await this.util.modal('您确认要取消此订单吗？','取消订单').then(async res=>{
						uni.$emit('clearCart',this.tableId);
						this.go({t:4})
						})
				
				},
				async expandBtn(type){
					try{
						switch (type){
							case 'clear':
								{
									await this.util.modal('您确认要整单清空吗').then(async res=>{
										let {msg} = await this.util.request({
											'url': this.api.tableClearOrder,
											method:"post",
											data: {
												tableId:this.tableId
											}
										})
										this.util.message(msg, 3, 2000)
										setTimeout(()=>{this.go({t:4})},2000)
									})
								}
							break;
							case 'discount':
								{
									this.discountShow = true
									this.loading = true
									let {msg} = await this.util.request({
										'url': this.api.tablePutMoney,
										method:"post",
										data: {
											tableId:this.tableId,
											money:this.expandForm.money,
											fracture:(+this.expandForm.fracture).toFixed(2),
											type:this.expandForm.type ,//changePrice改价    discount折扣    goZero抹零
											discountType:this.expandForm.discountType //1抹分 2抹角 3四舍五入到角 4四舍五入到元
										}
									})
									this.loading = false
									this.discountShow = false
									this.util.message(msg, 3, 2000)
									this.getData()
								}
							break;
							case 'turnTable':
								{
									let {msg} = await this.util.request({
										'url': this.api.tableTurn,
										method:"post",
										data: {
											tableId:this.tableId,
											toTableId:this.expandForm.toTableId
										}
									})
									this.turnShow= false
									this.util.message(msg, 3, 2000)
									setTimeout(()=>{this.go({t:4})},2000)
								}
							break;
							case 'print':
								{
									await this.util.modal('您确认要打印预订单吗').then(async res=>{
										let {msg} = await this.util.request({
											'url': this.api.tableHandleOrder,
											method:"post",
											data: {
												tableId:this.tableId,
												type:'print'
											}
										})
										this.util.message(msg, 3, 2000)
									})
								}
							break;
						}
					}catch(e){
						// console.log(e)
						this.util.message(e.msg, 3, 2000)
						this.loading = false
						this.discountShow = false
					}
				
				},
				radioGroupChange(e){
					this.isOut = e
				},
				async quickPay(){
					if(this.tableId != '0'){
						//先结账后用餐模式需要先提交订单
						await this.postOrder()
					}
					
					this.goPay()
				},
				goPay(){
					// 店内就餐
					if(this.isOut == '1'){
						this.go({
							t:1,
							url:'/yb_shd/dp/OrderDine/pay?tableId=' + this.tableId + '&isOut=' + this.isOut 
							+ '&userNote=' + this.value + '&amount=' + this.money + '&discount=' + this.discount
							+ '&originMoney=' + this.originMoney//计算包装费 TODO
						})
					}else{
						// 打包带走 快速点单
						this.go({
							t:1,
							url:'/yb_shd/dp/OrderDine/pay?tableId=' +this.tableId + '&amount=' + this.money //计算包装费 TODO
						})
					}
					
				},
				async postOrder(){
					await this.util.request({
						'url': this.api.saveOrder,
						method:"post",
						data: {
							isOut:this.isOut,
							tableId: this.tableId,
							people:this.people,
							userNote:this.value
							
						}
					})
					uni.navigateBack({
						delta: 2
					})
					
				},
				async getData(){
					let {eatType,data} = await this.util.request({
						'url': this.api.tableInfo,
						data: {
							tableId: this.tableId
						}
					})
					this.eatType = eatType
					this.tableName = `${data.regionName}-${data.typeName}-${data.name}`
					this.people = JSON.stringify(+data.people || 1)
					this.alreadyGoods = data.alreadyGoods
					this.tableState = data.state
					this.orderList = data.goods
					this.outTradeNo = data.outTradeNo
					this.money = data.money
					this.discount = data.discount
					this.originMoney = data.originMoney
					this.tablewareMoney = data.tablewareMoney
					this.serviceType = data.serviceType
				},
				showModal(){
					this.show = true
				},
				addGoods(){
					this.go({
						t:2,
						url:'/yb_shd/dp/OrderDine/quick-order?tableId=' +this.tableId + '&tableName=' + this.tableName
					})
				},
				async revisionNum(e){
					this.people = e[0].value
					try{
						let {msg} = await this.util.request({
							'url': this.api.tableChangePeople,
							method:"post",
							data: {
								tableId: this.tableId,
								people:this.people,
							}
						})
						this.util.message(msg, 3, 2000)
						this.getData()
					}catch(e){
						this.util.message(e.msg, 3, 2000)
						//TODO handle the exception
					}
				}
			}
		}
</script>

<style scoped>
	.top-line{
		width: 95%;
		height: 1px;
		position: absolute;
		left: 50%;
		top: 0;
		border: 1px dashed #F5F5F5 ;
		transform: translateX(-50%);
	}
	.btn{
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 120rpx;
		padding-top: 10rpx;
		background-color: #FFFFFF;
	}
	.add-dish{
		width: 150rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border: 1px solid #dad9d9;
		border-radius: 10rpx;
	}
	.check-out{
		width: 550rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
	}
	.all-in{
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 80rpx;
	}
	.expand-btns{
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		top: -80rpx;
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
	}
	.expand-btn{
		color: #FFF;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		width: 160rpx;
		text-align: center;
	}
	.reason{
		padding: 5rpx 10rpx;
		background: #999;
		color: #FFF;
		border-radius: 20rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
	}
	.reason:active{
		background:#409EFF;
	}
</style>
